<!--
 * @Author: ChunLai
 * @Date: 2022-04-18 16:24:34
 * @LastEditTime: 2023-12-05 13:48:23
 * @Description: 保障责任列表操作
 * @FilePath: \0.newInsure\src\views\count\components\LiabilityList.vue
-->
<template>
  <div class="liability-module w100">
    <div
      :class="['van-checkbox pd8_tb', duty.desc ? 'btm_line' : '']"
      v-for="(duty, index) in dutyList"
      :key="`${duty.value}`"
    >
      <div @click="changDutys(!duty.isCheck, index)" v-if="!duty.radioList">
        <div
          :class="[
            'van-checkbox__icon van-checkbox__icon--square',
            duty.isCheck ? 'van-checkbox__icon--checked' : '',
          ]"
          style="font-size: 14px"
        >
          <i
            class="van-icon van-icon-success"
            :class="{ checked_i: duty.isCheck }"
          ></i>
        </div>
      </div>
      <div class="van-checkbox__label">
        <div class="flex_ac">
          {{ duty.label }}
          <FieldDescMode
            :label="duty.label"
            type="img"
            :desc="duty.explainImg"
            v-if="duty.explainImg"
          />
        </div>
        <em
          class="label-em"
          v-if="duty.desc && duty.desc !== ''"
          v-html="duty.desc"
        ></em>
        <div v-if="duty.radioList && duty.radioList.length > 0">
          <div class="radio-list">
            <span
              :class="{
                'bg-col': checks[index] == ele.value && !ele.forbid,
                'forbid-btn': ele.forbid,
              }"
              @click="changeDutyRadio(index, ele)"
              v-for="ele in duty.radioList"
              :key="`${ele.value}`"
            >
              {{ ele.label }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FieldDescMode from "./FieldDescMode";
export default {
  name: "LiabilityList",
  props: {
    dutyList: {
      type: Array,
      default: () => [],
    },
    checks: {
      type: Array,
      default: () => [],
    },
    codeValue: {
      type: String,
      default: () => "",
    },
  },
  components: {
    FieldDescMode,
  },
  data() {
    return {};
  },
  methods: {
    changDutys(checkVal, index) {
      let duty = JSON.parse(JSON.stringify(this.dutyList));
      duty[index].isCheck = checkVal;
      this.$store.dispatch("risks/setRisks", {
        varietyCode: this.codeValue,
        type: "dutyList",
        val: duty,
      });
      this.$forceUpdate();
      // let dutyNow = []
      // if (this.checks.includes(duty.value)) {
      //   this.checks.splice(this.checks.indexOf(duty.value), 1);
      //   dutyNow = [...this.checks]
      // } else {
      //   // 不可同时附加的责任 forbidLiability
      //   if (duty.forbidLiability) {
      //     const isHas = this.checks.includes(duty.forbidLiability)
      //     if (isHas) {
      //       this.checks.splice(this.checks.indexOf(duty.forbidLiability), 1);
      //     }
      //   }
      //   dutyNow = [...this.checks, duty.value]
      // }
      // this.$emit("changDatas", this.codeValue, "dutyCodes", dutyNow)
    },
    changeDutyRadio(index, ele) {
      if (ele.forbid) {
        return;
      }
      this.$store.dispatch("risks/setRisks", {
        varietyCode: this.codeValue,
        type: "dutyCodes",
        val: ele.value,
        listIndex: index,
      });
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.label-em {
  color: #999999;
  font-size: 12px;
  font-style: normal;
}

.radio-list {
  display: flex;
  flex-wrap: wrap;
  padding-top: 5px;

  span {
    padding: 0 5px;
    border-radius: 4px;
    min-width: 60px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background-color: #f2f2f2;
    color: #444;
    font-size: 13px;
    margin-bottom: 4px;

    &.bg-col {
      background-color: #fb8c89;
      color: #fff;
    }

    &:not(:last-child) {
      margin-right: 8px;
    }

    &.forbid-btn {
      color: #999999;
    }
  }
}

.checked_i {
  border-color: #d44438;
  background-color: #d44438;
}

.liability-module {
  /deep/.van-checkbox {
    // margin-bottom: 10px;
    align-items: flex-start;
  }
}
</style>
